<style lang="scss" scoped>
.layout_wrap {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    background: #eceff4;
    .layout_header {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url("../assets/login/login_bac.png") no-repeat;
        background-size: 100%;
        background-position: bottom left;
        .header_left {
            padding-left: 16px;
            display: flex;
            align-items: center;
            img {
                height: 40px;
                width: 40px;
                margin-right: 16px;
            }
            .left_main {
                margin-right: 26px;
                .left_tit {
                    font-size: 18px;
                    color: rgb(0, 225, 235);
                    font-weight: 600;
                }
                .left_desc {
                    font-weight: 400;
                    font-size: 12px;
                    color: rgb(255, 255, 255, 0.3);
                }
            }
            .menu_icon {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }
        }
        .header_right {
            padding-right: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(0, 225, 235);
            .user_name {
                font-size: 14px;
            }
            .user_logo {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgb(0, 225, 235);
                border: none;
                margin: 0 20px;
            }
            .user_tag {
                display: inline-block;
                background: #fdc73a;
                color: #ffffff;
                height: 22px;
                line-height: 22px;
                padding: 0 8px 0 12px;
                font-size: 12px;
                border-radius: 0 6px 4px 20px;
            }
            .logout {
                width: 20px;
                height: 20px;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }
    .layout_main {
        flex: 1;
        box-sizing: border-box;
        padding: 20px 10px 10px;
        overflow: hidden;
        display: flex;
        .layout_menu {
            height: 100%;
            background: #ffffff;
            margin-right: 10px;
            border-radius: 4px;
            overflow-y: auto;
            box-sizing: border-box;
            &::-webkit-scrollbar { width: 0 !important }
            transition:  width .3s;
            .wrap_scroll {
                box-sizing: border-box;
                // min-height: 100%;
                overflow: auto;
                height: 100%;
            }
        }
        .content_wrap {
            flex: 1;
            height: 100%;
            overflow-y: auto;
            border-radius: 4px;
            box-sizing: border-box;
            .wrap_scroll {
                // height: 100%;
                min-height: 100%;
                overflow: auto;
            }
        }
    }
}
</style>

<template>
    <div class="layout_wrap">
        <div class="layout_header">
            <div class="header_left">
                <img :src="systemInfo.web_logo || defaultImg" alt="" />
                <div class="left_main" v-if="!isCollapse">
                    <div class="left_tit">{{ systemInfo.web_titile || '昭牛BI分析系统' }}</div>
                    <div class="left_desc">{{ systemInfo.web_slogan || 'BI Analysis System' }}</div>
                </div>
                <img
                    @click="changeCollapse"
                    src="@/assets/layout/menu.png"
                    alt=""
                    class="menu_icon"
                />
            </div>
            <div class="header_right">
                <span class="user_name">{{ userInfo.username || '--' }}</span>
                <img src="@/assets/layout/user.png" alt="" class="user_logo" />
                <span class="user_tag">{{ userInfo.rname || '--'}}</span>
                <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#626AEF"
                    title="确定退出登陆吗?"
                    @confirm="handleLogout"
                >
                    <template #reference>
                        <img
                            src="@/assets/layout/out.png"
                            alt=""
                            class="logout"
                        />
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="layout_main">
            <div class="layout_menu" :style="sideStyle">
              <div class="wrap_scroll">
                <el-menu router :default-active="defaultActive" :collapse="isCollapse">
                    <template v-for="(item, index) in menuList">
                        <el-sub-menu v-if="item.children && item.children.length" :index="item.router">
                            <template #title>
                                <el-icon><icon-menu /></el-icon>
                                <span>{{ item.mname }}</span>
                            </template>
                              <el-menu-item v-for="(val, ind) in item.children" :index="val.router">{{ val.mname }}</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item v-else :index="item.router">
                            <el-icon><icon-menu /></el-icon>
                            <template #title>{{ item.mname }}</template>
                        </el-menu-item>
                    </template>
                </el-menu>
              </div>
            </div>
            <div class="content_wrap">
                <div class="wrap_scroll">
                  <index-view/>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Menu as IconMenu, InfoFilled } from "@element-plus/icons-vue";
import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'
import { userStore as useMenuStore } from '@/store/menu.js'
import IndexView from '@/views/index.vue'
import defaultImg from '@/assets/layout/v2_rbrewx.png'
const menuStore = useMenuStore()
const menuList = JSON.parse(window.localStorage.getItem('BI_Menu') || '[]') || []
// const { menuList } = storeToRefs(menuStore)
const store = userStore()
const userInfo = JSON.parse(window.sessionStorage.getItem('BI_userInfo') || '{}') || {}
const systemInfo = JSON.parse(window.sessionStorage.getItem('BI_configMap') || '{}') || {}
// const { configMap: systemInfo = {} } = storeToRefs(store);
const router = useRouter();
const route = useRoute()
const isCollapse = ref(false);
const defaultActive = ref('')
const sideStyle = computed(() => {
    return { width: !isCollapse.value ? "200px" : "64px" };
});
const changeCollapse = () => {
    isCollapse.value = !isCollapse.value;
};
// 退出登陆 跳转到登录页面
const handleLogout = () => {
    store.setToken('')
    store.setUserInfo({})
    window.localStorage.removeItem('BI_Menu')
    router.replace({
        path: "/login",
    });
};
// 设置菜单默认选中
watch(() => route.path, (val) => {
  defaultActive.value = val
}, { immediate: true })
</script>